<template>
  <!-- 资源 -->
  <div id="article-category">
    <div class="div-breadcrumb">
      <el-card>
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple-dark">
              <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/statistics/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>文章分类</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <div class="center-query-form">
      <el-card>
        <el-row>
          <el-col :span="24">
            <el-form :inline="true" :model="queryForm" class="query-form-inline" size="mini">
              <el-form-item label="名称">
                <el-input v-model="queryForm.name" placeholder="名称"></el-input>
              </el-form-item>
              <el-form-item label="是否启用">
                <el-select v-model="queryForm.enabled" placeholder="状态">
                  <el-option label="全部" value=""></el-option>
                  <el-option label="是" :value="true"></el-option>
                  <el-option label="否" :value="false"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="handlerSearchSubmit()">查询</el-button>
                <el-button type="primary" @click="add()">新增</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </el-card>
    </div>

    <div class="center-table">
      <el-card>
        <el-row>
          <el-col :span="24">
            <el-table :data="tableData" stripe border size="mini" class="article-table">

              <el-table-column label="编号" align="center" width="80" fixed="left">
                <template slot-scope="scop">
                  {{ scop.$index + 1 }}
                </template>
              </el-table-column>

              <el-table-column prop="id" label="文章分类id" width="200" align="center" v-if="false">
              </el-table-column>
              <el-table-column prop="name" label="文章分类名称" width="200" align="center">
              </el-table-column>

              <el-table-column label="是否启用" width="150" align="center">
                <template slot-scope="scope">
                  <el-switch v-model="scope.row.enabled" active-color="#13ce66" inactive-color="#a6a6a6"
                             @change="handleStatusChange(scope.row)">
                  </el-switch>
                </template>
              </el-table-column>

              <el-table-column prop="version" label="版本" width="100" align="center" v-if="false">
              </el-table-column>
              <el-table-column prop="createTime" label="创建时间" width="200" align="center" sortable>
              </el-table-column>
              <el-table-column prop="updateTime" label="修改时间" width="200" align="center" v-if="true">
              </el-table-column>

              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button size="mini" type="primary" icon="el-icon-edit" circle
                             @click="edit(scope.$index, scope.row)">
                  </el-button>
                  <el-popconfirm title="这是一段内容确定删除吗？" @confirm="del(scope.$index, scope.row)">
                    <el-button size="mini" type="danger" icon="el-icon-delete" circle slot="reference"></el-button>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-card>
    </div>

    <!-- 分页插件 -->
    <div class="center-pagination">
      <el-card>
        <el-row>
          <el-col :span="24">
            <el-pagination background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
                           @current-change="handleCurrentChange" :current-page="pagination.current"
                           :page-sizes="[10, 20, 50, 100]"
                           :page-size="pagination.size" :total="pagination.total">
            </el-pagination>
          </el-col>
        </el-row>
      </el-card>
    </div>

    <!-- 新增dialog -->
    <el-dialog title="新增" :visible.sync="addDialogVisible" width="45%" class="aboutDialog" size="mini">
      <el-form :inline="false" :model="addForm" class="add-form" ref="addForm">
        <el-form-item label="文章分类名称" :label-width="formLabelWidth">
          <el-input v-model="addForm.name" placeholder="文章分类名称"></el-input>
        </el-form-item>
        <el-form-item label="是否启用" :label-width="formLabelWidth">
          <el-select v-model="addForm.enabled" placeholder="是否启用">
            <el-option label="是" :value="true"></el-option>
            <el-option label="否" :value="false"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item style="text-align: center;">
          <el-button @click="addDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handlerAddSubmit()">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 修改dialog -->
    <el-dialog title="修改" :visible.sync="updDialogVisible" width="45%" class="aboutDialog">
      <el-form :inline="false" :model="updForm" ref="updForm" class="upd-form">
        <el-form-item label="文章分类id" :label-width="formLabelWidth" hidden>
          <el-input v-model="updForm.id" placeholder="文章分类id"></el-input>
        </el-form-item>

        <el-form-item label="文章分类名称" :label-width="formLabelWidth">
          <el-input v-model="updForm.name" placeholder="文章分类名称"></el-input>
        </el-form-item>

        <el-form-item label="是否启用" :label-width="formLabelWidth">
          <el-select v-model="updForm.enabled" placeholder="是否启用">
            <el-option label="是" :value="true"></el-option>
            <el-option label="否" :value="false"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="创建时间" :label-width="formLabelWidth">
          <el-input v-model="updForm.createTime" placeholder="创建时间" readonly></el-input>
        </el-form-item>

        <el-form-item label="修改时间" :label-width="formLabelWidth">
          <el-input v-model="updForm.updateTime" placeholder="修改时间" readonly></el-input>
        </el-form-item>

        <el-form-item label="状态" :label-width="formLabelWidth" hidden>
          <el-input v-model="updForm.status" placeholder="状态" readonly></el-input>
        </el-form-item>
        <el-form-item style="text-align: center;">
          <el-button @click="updDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handlerUpdSubmit()">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>

</template>
<script>
import {
    articleCategoryPageList,
    articleCategorySave,
    articleCategoryUpdate,
    articleCategoryDeletes
} from '@/api/article'
import {
    Message
} from 'element-ui'

export default {
    name: 'my-article',
    data () {
        return {
            queryForm: {
                name: null,
                enabled: null,
                current: 1,
                size: 10
            },
            pagination: {
                current: 1,
                size: 10,
                total: 0
            },
            addDialogVisible: false,
            tableData: [],
            addForm: {
                name: null,
                enabled: null
            },
            formLabelWidth: '120px',

            updDialogVisible: false,
            updForm: {
                id: null,
                name: null,
                enabled: null,
                version: null,
                createTime: null,
                updateTime: null,
                status: null
            },
            srcList: []
        }
    },
    methods: {
    // 查询
        handlerSearchSubmit () {
            let params = {
                name: this.queryForm.name,
                enabled: this.queryForm.enabled,
                current: this.queryForm.current,
                size: this.queryForm.size
            }
            articleCategoryPageList(params).then((response) => {
                this.tableData = response.data.list
                this.pagination.total = response.data.total
                this.pagination.current = response.data.current
                this.pagination.size = response.data.size
            })
        },

        // 新增
        add () {
            this.addDialogVisible = true
        },

        // 新增提交
        handlerAddSubmit () {
            let params = {
                name: this.addForm.name,
                enabled: this.addForm.enabled
            }
            articleCategorySave(params).then((response) => {
                if (response && response.code === 200) {
                    Message.success({
                        message: response.message
                    })
                    this.addDialogVisible = false
                    this.addForm.name = null
                    this.addForm.enabled = null
                    this.handlerSearchSubmit()
                } else {
                    Message.warning({
                        message: response.message
                    })
                }
            })
        },

        // 切换每页条数
        handleSizeChange (size) {
            let params = {
                name: this.queryForm.name,
                enabled: this.queryForm.enabled,
                current: this.queryForm.current,
                size: size
            }
            articleCategoryPageList(params).then((response) => {
                this.tableData = response.data.list
                this.pagination.total = response.data.total
                this.pagination.current = response.data.current
                this.pagination.size = response.data.size
            })
            this.queryForm.size = size
        },

        // 切换页码
        handleCurrentChange (current) {
            let params = {
                name: this.queryForm.name,
                enabled: this.queryForm.enabled,
                current: current,
                size: this.queryForm.size
            }
            articleCategoryPageList(params).then((response) => {
                this.tableData = response.data.list
                this.pagination.total = response.data.total
                this.pagination.current = response.data.current
                this.pagination.size = response.data.size
            })
            this.queryForm.current = current
        },

        // 开关
        handleStatusChange (row) {
            let params = {
                id: row.id,
                enabled: row.enabled
            }
            articleCategoryUpdate(params).then((response) => {
                if (response && response.code === 200) {
                    Message.success({
                        message: response.message
                    })
                    this.handlerSearchSubmit()
                } else {
                    Message.warning({
                        message: response.message
                    })
                }
            })
        },

        // 编辑
        edit (index, row) {
            this.updForm.id = row.id
            this.updForm.name = row.name
            this.updForm.enabled = row.enabled
            this.updForm.version = row.version
            this.updForm.createTime = row.createTime
            this.updForm.updateTime = row.updateTime
            this.updForm.status = row.status
            this.updDialogVisible = true
        },

        // 编辑提交
        handlerUpdSubmit (id) {
            let params = {
                id: this.updForm.id,
                name: this.updForm.name,
                enabled: this.updForm.enabled
            }
            articleCategoryUpdate(params).then((response) => {
                if (response && response.code === 200) {
                    Message.success({
                        message: response.message
                    })
                    this.updDialogVisible = false
                    this.updForm.id = null
                    this.updForm.name = null
                    this.updForm.enabled = null
                    this.updForm.version = null
                    this.updForm.createTime = null
                    this.updForm.updateTime = null
                    this.updForm.status = null
                    this.handlerSearchSubmit()
                } else {
                    Message.error({
                        message: response.message
                    })
                    return false
                }
            })
        },

        // 删除
        del (index, row) {
            let params = []
            params.push(row.id)

            articleCategoryDeletes(params).then((response) => {
                if (response && response.code === 200) {
                    Message.success({
                        message: response.message
                    })
                    this.handlerSearchSubmit()
                }
            })
        },

        bigImg (url) {
            this.srcList = []
            this.srcList.push(url)
        }

    },
    mounted () {
    // this.tableData.forEach(e => {
    //   this.srcList.push(e.cover);
    // })
        let params = {
            name: this.queryForm.name,
            enabled: this.queryForm.enabled,
            current: this.queryForm.current,
            size: this.queryForm.size
        }
        articleCategoryPageList(params).then((response) => {
            this.tableData = response.data.list
            this.pagination.total = response.data.total
            this.pagination.current = response.data.current
            this.pagination.size = response.data.size
        })
    }
}
</script>

<style scoped>
#article-category {
  width: 100%;
  height: auto;
}

.div-breadcrumb {
  margin: 20px 30px 0px 30px;
}

.bg-purple {
  background: #d3dce6;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

/* 搜索表单 */
.center-query-form {
  margin: 0px 30px 0px 30px;
}

/* 表格 */
.center-table {
  margin: 0px 30px 0px 30px;
}

.article-table {
  width: 100%;

}

/* 分页 */
.center-pagination {
  margin: 0px 30px 20px 30px;
  text-align: center;
}

/* dialog */
.aboutDialog {
  height: auto;
  text-align: left;
}

.aboutDialog >>> .el-dialog__body {
  padding: 15px 15px 15px 0px !important;
}

.aboutDialog >>> .el-dialog__header {
  padding: 10px 20px;
  height: 25px;
  line-height: 25px;
  text-align: left;
  background: #3378df;
  border-bottom: solid 1px #3378df;
}

.aboutDialog >>> .el-dialog__title {
  color: #fff;
  font-size: 14px;
}

.aboutDialog >>> .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}

.aboutDialog >>> .el-dialog__header btn:hover .el-dialog__close {
  color: #fff;
}

.aboutDialog >>> .el-dialog__header btn {
  top: 13px;
}

.aboutDialog >>> .el-dialog__footer {
  padding: 10px 20px;
  border-top: solid 1px #3378df;
}
</style>
